<template>
  <div class="wrap">
    <el-form
      :inline="true"
      :model="ruleform"
      ref="from"
      :rules="rules"
      class="demo-form-inline ip-form"
    >
      <el-form-item label="上上级分组名称" prop="gfather_name">
        <el-input
          v-model="ruleform.gfather_name"
          message
          placeholder
        ></el-input>
      </el-form-item>
      <el-form-item label="上级分组名称" prop="father_name">
        <el-input v-model="ruleform.father_name" message placeholder></el-input>
      </el-form-item>
      <el-form-item label="分组名称" prop="org_name">
        <el-input v-model="ruleform.org_name" message placeholder></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" plain @click="onSubmit('from')"
          >创建</el-button
        >
        <el-button type="warning" plain @click="onReset('from')"
          >重置</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getData, postData } from "@/request/http";
import { resetForm } from "@/utils/Tool";
export default {
  name: "",
  components: {},
  props: {},
  data() {
    return {
      ruleform: {
        gfather_name: "",
        father_name: "",
        org_name: "",
      },
      rules: {
        gfather_name: [{ required: true, message: "请输入上上级分组名称", trigger: "blur" }],
        father_name: [{ required: true, message: "请输入上级分组名称", trigger: "blur" }],
        org_name: [{ required: true, message: "请输入分组名称", trigger: "blur" }],
      },
    };
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {
    //添加 提交
    onSubmit(formName) {
      var that = this;
      that.$refs[formName].validate((valid) => {
        if (
          that.ruleform.gfather_name == "" ||
          that.ruleform.father_name == "" ||
          that.ruleform.org_name == ""
        ) {
        //   this.$message.error("请先输入必填项！");
          return;
        }
        if (
          that.ruleform.gfather_name.length>20 ||
          that.ruleform.father_name.length>20 ||
          that.ruleform.org_name.length>20 
        ) {
           this.$message.error("分组名称须1-20个字符");
          return;
        }
        if (valid) {
          postData("/adminweb/org/register", {
            gfather_name: that.ruleform.gfather_name,
            father_name: that.ruleform.father_name,
            org_name: that.ruleform.org_name,
          })
            .then((res) => {
              if (res.code == 0) {
                that.$message.success("创建成功！");
                //刷新table
                that.$store.commit(
                  "setSubmitData",
                  Math.floor(Math.random() * 10000000)
                );
                let datas = resetForm(that.ruleform, this.$refs[formName]);
                that.ruleform = datas;
              } else {
                this.$message.error(res.code + "，" + res.msg);
              }
            })
            .catch((res) => {
              this.$message.error(res.code + "，" + res.msg);
            });
        } else {
          that.$message.error("创建失败");
          return false;
        }
      });
    },
    //重置
    onReset(val) {
      this.$refs[val].resetFields();
    },
  },
  watch: {},
};
</script>
<style scoped>
.wrap {
  /* background-color: #fff; */
  padding: 15px;
}
</style>
